<template>
    <div class="box box1 active">
        <img :src="bgImg" alt="">

        <img :src="footImg" alt="" class="foot">
        <span class="s_1">宁波</span>
        <span class="s_2">阴 33℃</span>
        <div class="input-carousel-wrap" @click="goToBox2">
            <div class="carousel-text" id="carousel-text">闪购</div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import bgImg from '@/assets/img/02.jpg'
import footImg from '@/assets/img/02_foot.png'
import { checkAppLaunch } from '@/utils/app-launch-manager.js'

const router = useRouter()

function goToBox2() {
    router.push('/box2')
}

onMounted(() => {
    // 检查是否是应用新启动，如果是则重置相关标记
    const isNewLaunch = checkAppLaunch()
    if (isNewLaunch) {
        console.log('检测到应用新启动，已重置相关标记')
    }

    // 轮播动画文字
    const carouselWords = ["外卖", "余额宝", "蚂蚁森林", "小荷宝", "花呗"];
    const carouselText = document.getElementById('carousel-text');
    let carouselIndex = 1;
    function nextCarousel() {
        carouselText.classList.remove('show');
        carouselText.classList.add('slide-up');
        setTimeout(() => {
            carouselText.classList.remove('slide-up');
            carouselText.classList.add('slide-down');
            carouselText.textContent = carouselWords[carouselIndex];
            void carouselText.offsetWidth;
            carouselText.classList.remove('slide-down');
            carouselText.classList.add('show');
            carouselIndex = (carouselIndex + 1) % carouselWords.length;
        }, 400);
    }
    carouselText.classList.add('show');
    setInterval(nextCarousel, 3000);
});
</script>

<script>
/* global plus */
export default {
    name: 'BoxOne',
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
    },
    methods: {
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.back();
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        handleTouchStart(e) {
            this.startX = e.touches[0].clientX
            this.startY = e.touches[0].clientY
        },
        handleTouchEnd(e) {
            const endX = e.changedTouches[0].clientX
            const endY = e.changedTouches[0].clientY
            const deltaX = endX - this.startX
            const deltaY = endY - this.startY
            if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
                if (deltaX > 0) {
                    this.goPrev()
                } else {
                    this.goNext()
                }
            }
        },
        goPrev() {
            this.$router.push('/box13')
        },
        goNext() {
            this.$router.push('/box2')
        }
    },
    beforeUnmount() {
        // 移除监听
        document.removeEventListener('plusready', this.handleBackButton);
    }
}
</script>

<style scoped>
.back {
    position: absolute;
    left: 0;
    top: 0;
    background-color: blue;
    opacity: 1;

}

.bigbox {
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.box {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: absolute;
    overflow: auto;
}

.img_top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}

.box img {
    width: 100%;
}

.active {
    display: block;
}

.foot {
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 9;
}

.s_1 {
    position: absolute;
    top: 46px;
    left: 12px;
    font-size: 16px;
}

.s_2 {
    font-size: 12px;
    top: 70px;
    left: 12px;
    position: absolute;
}

.input-carousel-wrap {
    position: absolute;
    left: 97px;
    top: 47px;
    /* 不换行 */
    width: 80px;
    height: 32px;
    display: inline-block;
    font-size: 15px;
}

.carousel-text {
    position: absolute;
    left: 0;
    top: 0;
    /* width: 100%; */
    height: 100%;
    line-height: 32px;
    color: #404040;
    pointer-events: none;
    background: transparent;
    z-index: 2;
    transition: transform 0.4s, opacity 0.4s;
    will-change: transform, opacity;
    font-size: 15px;
    /* padding-left: 8px; */
    opacity: 1;
    transform: translateY(0);
}

/* 临时注释掉，看是否影响白屏
.carousel-text.slide-up {
    transform: translateY(-100%);
    opacity: 0;
}

.carousel-text.slide-down {
    transform: translateY(100%);
    opacity: 0;
}

.carousel-text.show {
    transform: translateY(0);
    opacity: 1;
}
*/
</style>
